<template>
  <Transition class="animate__animated animate__zoomIn">
    <div :class="props.check!?'window':'window window-un'" @click.stop="OpenWindow" :style="props.check!?theme.color.Window.active:theme.color.Window.unActive">
      <div>
        <div class="window-label-body">
          <div :class="props.check!?'win-icon':'win-icon-un'">
            <el-icon size="20">
              <component :is="icon"/>
            </el-icon>
          </div>
          <div :class="props.check!?'win-title':'win-title-un'">
            {{ props.title! }}
          </div>
          <div :class="props.check!?'win-close':'win-close-un'" style="margin-left: 2px">
            <el-button size="small"  icon="Close" link type="danger"  @click.stop="CloseWindow" style="background-color: transparent"/>
          </div>
        </div>
        <Underline v-show="props.check"/>
      </div>
    </div>
  </Transition>

</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useWindowsStore} from "../../../../store/windows";
import {useRouter} from "vue-router";
import {useThemeStore} from "../../../../store/theme";
import {AllIcons} from "../../../../icons";
import Underline from "./Underline.vue";

const windowLabel = useWindowsStore()
const router = useRouter()
const theme = useThemeStore()

const props = defineProps({
    // 窗口标题
    title: {
        type: String
    },
    // 窗口路径 路由关键信息
    path: {
        type: String
    },
    // 窗口序列号 动态渲染时候确定
    index: {
        type: Number
    },
    // 当前窗口是否选中
    check: {
        type: Boolean
    },
    // 文件类型，（窗口类型，动态初始化窗口图标使用）
    windowType: {
        type: Number,
        default: 0
    }
})

const icon = ref('')
const windowName = ref('')

function OpenWindow() {
    router.push(props.path!)
    windowLabel.openWindow(props.path!, props.index!)
}

function CloseWindow() {
    windowLabel.closeWindow(props.check!, props.index!)
}

onMounted(() => {
    icon.value = AllIcons.WindowIconsMapping.get(<number>props.windowType)!
})

</script>

<style scoped>
.window {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.window-un{
}
.window-un:hover{
    background-color: rgba(176, 180, 175, 0.34);
}

.window-label-body{
    display: flex;
    flex-direction: row;
}

.win-title, .win-close, .win-icon {
    user-select: none;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 10px;

}

.win-title-un, .win-close-un, .win-icon-un {
    user-select: none;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 10px;
}

.win-icon {

}

.win-close:hover {
    color: red;

}

.win-close-un:hover {
    color: red;
}

</style>